<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>获得元素属性</title>
    <style>

        body,ul{
            margin: 0;
            padding: 0;
        }

        .banner{
            width: 100%;
            height: 450px;

        }
        .banner>a{
            display: block;
            width: 100%;
            height: 100%;
        }
        .banner>a>img{

            width: 100%;
            height: 100%;
        }

        .small-banner-area{
            width: 110px;
            height: 340px;

            position: absolute;
            right: 50px;
            top:100px
        }
        .small-banner-area>ul{
            list-style: none;
        }
        .small-banner-area>ul>li{
            width: 100%;
            height: 62px;
            margin-bottom: 5px;

        }
        .small-banner-area>ul>li a{
            display: block;
            width: 100%;
            height: 100%;
        }
        .small-banner-area>ul>li a img{
            width: 100%;
            height: 100%;
        }
        .small-banner-area>ul>li a img:hover{
            border: 1px solid orange;
        }
    </style>
</head>
<body>
    <div class="banner">
        <a href="">
            <img src="images/big-banner1.jpg">
        </a>
    </div>

    <div class="small-banner-area">
        <ul>
            <li><a href=""><img src="images/small-banner1.png" onmouseover="changeImg(1)"> </a> </li>
            <li><a href=""><img src="images/small-banner2.png" onmouseover="changeImg(2)"> </a> </li>
            <li><a href=""><img src="images/small-banner3.png" onmouseover="changeImg(3)"> </a> </li>
            <li><a href=""><img src="images/small-banner4.png" onmouseover="changeImg(4)"> </a> </li>
            <li><a href=""><img src="images/small-banner5.png" onmouseover="changeImg(5)"> </a> </li>
        </ul>
    </div>

    <ul class="pro-list">

    </ul>


<script src="js/js_03.js"></script>
</body>
</html>